<!DOCTYPE html>
<html>
<head>
<title>基地管理</title>
<#include "/header.html">
<style type="text/css">
    html,body{margin:0;padding:0;}
    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
</head>
<body>
<div id="witapp" v-cloak>
	<div v-show="showList">
		<div class="grid-btn">
			<div class="form-group col-sm-2">
				<input type="text" class="form-control" v-model="q.key" @keyup.enter="query" placeholder="关键字查询">
			</div>
			<a class="btn btn-default" @click="query">查询</a>
			<#if shiro.hasPermission("farm:save")>
            <a class="btn btn-success" @click="addFarm()"><i class="fa fa-plus"></i>&nbsp;新增</a>
			</#if>
            <#if shiro.hasPermission("farm:update")>
                <a class="btn btn-success" @click="editFarm()"><i class="fa fa-pencil-square-o"></i>&nbsp;编辑</a>
			</#if>
			<#if shiro.hasPermission("farm:delete")>
            <a class="btn btn-success" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
			</#if>
            <#if shiro.hasPermission("farm:update")>
                <a class="btn btn-success" @click="viewInfo"><i class="fa fa-eye"></i>&nbsp;查看</a>
            </#if>
		</div>
	    <table id="jqGrid"></table>
	    <div id="jqGridPager"></div>
    </div>
    <div id="div_farm_dialog" style="display:none">
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-2 control-label">基地名称</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" placeholder="基地名称"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">基地类型</div>
                <div class="col-sm-10">
                    <select id="type_id" class="form-control"></select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">销售方式</div>
                <div class="col-sm-10">
                    <select id="sales_id" class="form-control"></select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">基地经度</div>
                <div class="col-sm-10">
                    <input type="text" style="cursor:pointer;" class="form-control" id="farmLongs" placeholder="选择基地经度" @click="getLocation()" oninput="value=value.replace(/[^\d.]/g,'')"/><i title="手动输入经度" class="fa fa-pencil-square-o" style="position:absolute;top:3px;right:18px;padding:8px;cursor:pointer;" onclick="inputValue(1)"></i>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">基地纬度</div>
                <div class="col-sm-10">
                    <input type="text" style="cursor:pointer;" class="form-control" id="farmLat" placeholder="选择基地纬度" @click="getLocation()" oninput="value=value.replace(/[^\d.]/g,'')"/><i title="手动输入纬度" class="fa fa-pencil-square-o" style="position:absolute;top:3px;right:18px;padding:8px;cursor:pointer;" onclick="inputValue(2)"></i>
                </div>
            </div>
            <div class="form-group areaSelectText">
                <div class="col-sm-2 control-label">区域位置</div>
                <div class="col-sm-10">
                    <div id="div_area_import">
                        <select class="col-sm-12 form-control clsProvince" id="farmProvinceId" style="cursor:pointer;" onchange="thisPage.getAreaData(this.value,'#div_area_import','.clsCity','请选择市|区');"><option value=''></option></select>
                        <select class="col-sm-12 form-control clsCity" id="farmCityId" style="display:none;margin-top:4px;cursor:pointer;" onchange="thisPage.getAreaData(this.value,'#div_area_import','.clsCounty','请选择区|县|市');"><option value=''></option></select>
                        <select class="col-sm-12 form-control clsCounty" id="farmCountyId" style="display:none;margin-top:4px;cursor:pointer;" onchange="thisPage.getAreaData(this.value,'#div_area_import','.clsTowns','请选择乡|镇|社区');"><option value=''></option></select>
                        <select class="col-sm-12 form-control clsTowns" id="farmTownsId" style="display:none;margin-top:4px;cursor:pointer;" onchange="thisPage.getAreaData(this.value,'#div_area_import','.clsVallage','请选择村|组');"><option value=''></option></select>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">详细地址</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="address" placeholder="详细地址"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">基地面积</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="area" placeholder="基地面积（亩）" oninput="value=value.replace(/[^\d.]/g,'')"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">种养种类</div>
                <div class="col-sm-10">
                    <select id="species_id" class="form-control">
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">计量单位</div>
                <div class="col-sm-10">
                    <select id="unit_id" class="form-control">
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">联系人</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="link_man" placeholder="联系人"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">联系电话</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="link_tel" placeholder="联系电话"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">基地图片</div>
                <div class="col-sm-10">
                    <input type="file" id="framImages" multiple title="选择基地图片" placeholder="选择基地地图上传">
                </div>
            </div>
            <div class="form-group" id="showImages" style="display:none;"></div>
            <div class="form-group">
                <div class="col-sm-2 control-label">状态</div>
                <label class="radio-inline">
                    <input type="radio" name="status" value="0"/> 禁用
                </label>
                <label class="radio-inline">
                    <input type="radio" name="status" value="1"/> 正常
                </label>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">描述</div>
                <div class="col-sm-10">
                    <textarea rows="8" class="form-control" id="description" placeholder="描述"></textarea>
                </div>
            </div>
        </form>
    </div>

    <div id="div_select_area" style="display:none">
        <div style="display:flex;flex-direction:row;">
            <div class="col-sm-6 control-label" style="height:36px;line-height:36px;text-align:center;" id="div_longs">经度:0.0</div>
            <input id="hidden_longs" type="hidden">
            <div class="col-sm-6 control-label" style="height:36px;line-height:36px;text-align:center;" id="div_lat">纬度:0.0</div>
            <input id="hidden_lat" type="hidden">
            <div class="col-sm-6 control-label" style="height:36px;line-height:36px;text-align:center;"><a title="找不到可以试试这个" id="tryThis" href="javascript:;" style="color:#ff0084;text-decoration: none;outline:none;">试试这个</a></div>
        </div>
        <div style="width:782px;height:650px;" id="dituContent"></div>
    </div>
</div>
<div id="div_view_layer" style="display: none;padding:10px;">
    <form class="form-horizontal"></form>
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=r8aXwsks3aVHaFuQ0wxUEfwBLMCLuZH8&v=1.1&services=true"></script>
<script src="${request.contextPath}/statics/js/modules/wit/farm.js?_${.now?long}"></script>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }

    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        map.setCurrentCity("贵阳市");
        var point = new BMap.Point(106.667677,26.585372);//定义一个中心点坐标
        map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
        map.addEventListener("click", function(e){
            $('#div_longs').text('经度:'+e.point.lng);
            $('#div_lat').text('纬度:'+e.point.lat);
            $('#hidden_longs').val(e.point.lng);
            $('#hidden_lat').val(e.point.lat);
        });
    }

    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }
    initMap();//创建和初始化地图

    function inputValue(type){
        var title = "请输入值";
        switch (type){
            case 1:
                title = "请输入基地经度";
                break;
            case 2:
                title = "请输入基地纬度";
                break;
            default:
                break;
        }
        layer.prompt({title:title},function(val,index){
            layer.close(index);
            val = val.replace(/[^\d.]/g,'');//仅允许输入数字和小数点
            if(type == 1){
                $('#farmLongs').val(val);
            }else if(type == 2){
                $('#farmLat').val(val);
            }
        });
    }
</script>
</body>
</html>